<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>

	<div class="weui-flex">
	    <div class="weui-flex__item news_item1 " style="flex-grow:1;justify-content: center;align-items:center; " id="test">
	        <img style="width:100%;" src="<c:url value='/images/we/enterpriseInsurance/risk.png' />" />		
	    </div>
	    <div class="weui-flex__item news_item2" style="flex-grow:1;justify-content: center;align-items:center; " id="test">
	        <img style="width:100%;" src="<c:url value='/images/we/enterpriseInsurance/risk.png' />" />		
	    </div>
	</div>
	
	<div class="weui-grids">
		<c:forEach var="option" items="${options}" varStatus="status">			
			<c:choose>
				<c:when test="${status.index+1==1}">			
					<div class="weui-grid js_grid grid-button">
						<a href="javascript:;" class="weui-btn weui-btn_default active goods-${forId}" data-id="goods-${forId}">${option.paramValue}</a>
					</div>
				</c:when>
				<c:otherwise>	   	
					<div class="weui-grid js_grid grid-button">
						<a href="javascript:;" class="weui-btn weui-btn_default goods-${forId}" data-id="goods-${forId}">${option.paramValue}</a>
					</div>
				</c:otherwise>
			</c:choose>		
		</c:forEach>
	</div>
	
	<div id="goods-${forId}">
		
	</div>

<script type="text/javascript">
	$(function(){
		
		$(".grid-button").click(function(){
			$(this).children().addClass("active");
			$(this).siblings().children().removeClass("active");
			aChange();
		});
		
	});
	
	function aChange(){
		var $li = $("#first-menu li.active");
		var serviceTypeName = $li.find("span").html();
		var forId = $li.data("id");
		var $a = $(".grid-button a.goods-${forId}.active");
		var serviceName = $a.html();
		var goodsId = $a.data("id");
		var url = $.getVirtualPath()+"/wechat/ser/serIndex/goods?serviceTypeName="+serviceTypeName+"&serviceName="+serviceName;
		var html = $.getText(url);
		$("#"+goodsId).html(html);
		
	}	
</script>